<template>
  <div class="filter-container">
    <el-input
      v-model="listQueryValue.accountId"
      :placeholder="listQueryRemark.accountId"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    />
    <el-select
      v-model="listQueryValue.depositType"
      :placeholder="listQueryRemark.depositType"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.depositTypeOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-select
      v-model="listQueryValue.depositStatus"
      :placeholder="listQueryRemark.depositStatus"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.depositStatusOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-button
      v-waves
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="handleFilter"
    >
      {{ listQueryRemark.search }}
    </el-button>
    <!-- <el-button
      v-waves
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleAdd"
    >
      {{ listQueryRemark.add }}
    </el-button> -->
    <el-button
      v-waves
      :loading="downloadLoading"
      class="filter-item"
      type="primary"
      icon="el-icon-download"
      @click="handleDownload"
    >
      {{ listQueryRemark.export }}
    </el-button>
    <!-- <el-checkbox
        v-model="showReviewer"
        class="filter-item"
        style="margin-left: 15px"
        @change="tableKey = tableKey + 1"
      >
        {{ t("table.reviewer") }}
      </el-checkbox> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQueryRemark: {
        accountId: "卡号",
        depositStatusOptions: [
          { key: "进行中", displayName: "进行中" },
          { key: "可取款", displayName: "可取款" },
          { key: "已结束", displayName: "已结束" },
        ],
        depositStatus: "存款状态",
        depositTypeOptions: [
          { key: "DemandDeposit", displayName: "活期存款" },
          { key: "FixedDeposit", displayName: "定期存款" }
        ],
        depositType: "存款类型",
        search: "搜索",
        add: "添加",
        export: "导出",
        total: 100,
      },
      listQueryValue: {
        accountId: "",
        depositStatus: "",
        depositType: "",
      },
    };
  },
  methods: {
    getSortClass(key) {
      console.log(key + "***");
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        dataMap.sortByID(order);
      }
    //   /* 修改数据时，将调用$emit（），
    //   把自增结果传给父组件 */
    //   this.$emit('updateData',this.count)
    }
  }
};
</script>